<template>
  <div>
    <el-container>
      <el-main>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/abc' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
          <el-breadcrumb-item>活动列表</el-breadcrumb-item>
          <el-breadcrumb-item>活动详情</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="btn">
          <el-button @click="deleteAll">删除</el-button>
        </div>
        <el-table
          :data="list"
          stripe
          style="width: 100%"
          max-height="500"
        >
          <el-table-column prop="date"  width="100" label="时间"> </el-table-column>
          <el-table-column type="index" width="80" label="编号">
          </el-table-column>
          <el-table-column prop="type1" label="物品类型" width="100">
          </el-table-column>
          <el-table-column prop="type2" label="物品重量" width="100">
          </el-table-column>
          <el-table-column prop="id" label="订单编号" width="100">
          </el-table-column>
          <el-table-column prop="money" label="价格/元" width="100" sortable>
          </el-table-column>
          <el-table-column prop="type" label="类型">
          </el-table-column>
          <el-table-column prop="area1" label="市"> </el-table-column>
          <el-table-column prop="area2" label="区"> </el-table-column>
          <el-table-column prop="area3" label="社区"> </el-table-column>
          <el-table-column prop="address" label="详细地址" width="280">
          </el-table-column>
          <el-table-column label="操作" width="145">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
              <el-button
                
                size="mini"
                @click="revoke(scope.$index, scope.row)"
                >撤销</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <el-row>
          <el-col :span="8"
            ><div class="grid-content bg-purple">总价：</div></el-col
          >
          <el-col :span="8"
            ><div class="grid-content bg-purple-light">
              {{ totalPrice }}元
            </div></el-col
          >
          <el-col :span="8"
            ><div class="grid-content bg-purple-light">
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >支付</el-button
              >
            </div></el-col
          >
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      pager: {
        _page: 1,
        _limit: 5,
      },
      list: [],
      pager: {
        _page: 1,
        _limit: 5,
      },
      list: [],
      multipleSelection: [],
    };
  },
  created() {
    this.query();
  },
  computed: {
    totalPrice: function () {
      var sum = 0;
      for (let book of this.list) {
        sum += book.money;
      }
      return sum.toFixed(2);
    },
  },
  methods: {
    query() {
      this.axios.get("http://localhost:3000/received").then((response) => {
        this.list = response.data;
      });
    },
    //取消订单
     revoke(index, row) {
      // console.log(index, row);
      
      this.axios({
        method: "post",
        url: 'http://localhost:3000/dingdan',
        data: {
          type: row.type,
          type1: row.type1,
          type2: row.type2,
          area1: row.area1,
          area2: row.area2,
          area3: row.area3,
          date: row.date,
          money:row.money,
          value1:row.value1,
          id:row.id
        }
      }).then(res => {
         this.axios
        .delete("http://localhost:3000/received/" + row.id)
        .then((response) => {
          
        });
        this.query();
      });
    },
    handleDelete(index, row) {
      this.axios
        .delete("http://localhost:3000/dingdan/" + row.id)
        .then((response) => {
          // index+=1;
          //this.list=this.list.splice(index, 1);
          console.log(index);
          this.query();
        });
    },
    deleteAll() {
      this.multipleSelection.forEach((item, index) => {
        alert(index);
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style scoped>
.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}
.el-row {
  margin-bottom: 20px;
  border: 1px solt;
  width: 100%;
  height: 80px;
  background-color: rgb(216, 218, 218);
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 80px;
}
.btn {
  float: right;
}
</style>
